<template>
  <div class="container">
    <div class="leftTree">
      <div class="title">
        <div>组织机构</div>
        <i class="el-icon-refresh"></i>
      </div>
      <div class="treeData">
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </div>
    </div>
    <div class="space"></div>
    <div class="right">
      <div class="rightTitle">客户分布</div>
      <el-row gutter="20" class="rightRow">
        <el-col :span="8">
          <p>客户分布图</p>
          <el-table :data="tableData"  style="width: 100%">
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="60px"
            ></el-table-column>
            <el-table-column
              prop="province"
              label="省份"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="clientNum"
              label="客户数"
              align="center"
            ></el-table-column>
          </el-table>
        </el-col>
         <el-col :span="8">
          <p>客户类型分布</p>
          <el-table :data="tableData">
            <el-table-column
              label="序号"
              align="center"
              type="index"
            ></el-table-column>
            <el-table-column
              prop="province"
              label="客户类型"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="clientNum"
              label="客户数"
              align="center"
            ></el-table-column>
          </el-table>
        </el-col>
         <el-col :span="8">
          <p>客户商机分布</p>
          <el-table :data="tableData">
            <el-table-column
              label="序号"
              align="center"
              type="index"
            ></el-table-column>
            <el-table-column
              prop="province"
              label="商机状态"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="clientNum"
              label="客户数"
              align="center"
            ></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          label: '一级 1',
          children: [
            {
              label: '二级 1-1',
            },
          ],
        },
        {
          label: '一级 2',
          children: [
            {
              label: '二级 2-1',
            },
            {
              label: '二级 2-2',
            },
          ],
        },
        {
          label: '一级 3',
          children: [
            {
              label: '二级 3-1',
            },
            {
              label: '二级 3-2',
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      tableData: [
        {
          province:'江苏',
          clientNum:'50'
        },
         {
          province:'浙江',
          clientNum:'50'
        }
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;
  .space {
    width: 10px;
    height: 100%;
    background: #1c2238;
  }
  .leftTree {
    .title {
      font-size: 16px;
      height: 40px;
      width: 200px;
      background: #354060;
      padding: 0 16px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .treeData {
      padding: 0 16px;
    }
  }
  .right {
    width: 100%;
    .rightTitle {
      font-size: 16px;
      line-height: 40px;
      background: #354060;
      padding: 0 16px;
    }
    .rightRow{
      padding: 0 16px;
      p{
        line-height: 60px;
        text-align: center;
      }
    }
  }
}
::v-deep {
  .el-tree {
    background: none;
    color: #fff;
    .el-tree-node__content:hover {
      color: #fff;
      background: #1f9bfd;
    }
    .el-tree-node:focus > .el-tree-node__content {
      background: #1f9bfd;
    }
  }
}
.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}
::v-deep{
  // .el-table{
  //   border:1px solid #999;
  //   .el-table__body-wrapper .el-table__body .el-table__row td{
  //     border:1px solid #999;
  //   }
  //   .el-table__header-wrapper .el-table__header thead tr .is-leaf{
  //     // border-bottom:1px solid #999
  //   }
  // }
}
</style>
